<template>
    <div class="app">
        <div class="top">
            <div class="left"><el-input v-model="pageQuery.search" style="width: 240px" placeholder="请输入角色名称、key等查询" />
            </div>
            <div class="button"> <el-button type="primary" @click="getPage">查询</el-button></div>
            <div class="right"><el-button type="success" @click="openAddOne">新增</el-button></div>
        </div>
        <div class="middle">
            <div style="border-radius: 15px; overflow: hidden; background-color: white;">
                <el-table :data="formData" stripe style="width: 100%" max-height="520">
                    <el-table-column align="center" prop="userName" label="用户账号" width="200" show-overflow-tooltip />
                    <el-table-column align="center" prop="nickName" label="用户名称" width="150" />

                    <el-table-column prop="userimg" label="用户头像" width="200" align="center">
                        <template #default="scope">
                            <el-image style="width: 60px; height: 60px" :src="scope.row.avatar" :zoom-rate="1.2"
                                :max-scale="7" :min-scale="0.2" :preview-src-list="[scope.row.avatar]"
                                :initial-index="4" fit="cover" preview-teleported />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="remark" label="备注" width="200" show-overflow-tooltip=""/>
                        
                    <el-table-column align="center" prop="loginIp" label="最后登录ip" width="150" />
                    <el-table-column align="center" prop="loginDate" label="最后登录时间" width="150" />
                    <el-table-column align="center" prop="createTime" label="创建时间" width="200" />
                    <el-table-column fixed="right" label="操作" width="140">
                        <template #default="scope">
                            <el-button link type="danger" size="small" v-if="scope.row.status == '未锁定'"
                                @click="openEdit(scope.row)">修改</el-button>

                            <!-- <el-button link type="danger" size="small" v-if="scope.row.status == '未锁定'"
                                @click="lockOne(scope.row)">锁定</el-button>
                            <el-button link type="success" size="small" v-if="scope.row.status == '锁定'"
                                @click="lockOne(scope.row)">解锁</el-button> -->
                            <el-button link type="warning" size="small" @click="resetPassword(scope.row)">重置密码</el-button>
                            <!-- <el-button link type="danger" size="small" @click="openDelOne(scope.row)">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="buttom">
            <div>
                <el-pagination v-model:current-page="pageQuery.pageNum" v-model:page-size="pageQuery.pageSize"
                    :page-sizes="[100, 200, 300, 400]" :size="size" :background="false"
                    :default-page-size="pageQuery.pageSize" layout="sizes, prev, pager, next" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>




        <el-dialog v-model="delOneDialogVisible" title="警告！" width="500" :before-close="handleClose">
            <span>确定删除这个({{ delProp.roleName }},{{ delProp.roleKey }})角色么？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="success" @click="delOneDialogVisible = false, cleanForm">算了吧</el-button>
                    <el-button type="danger" @click="delOneDialogVisible = false, delOne()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>


        <el-dialog v-model="addOneDialogVisible" title="新增" width="500" :before-close="handleClose">

            <el-form :model="form" label-width="auto" style="max-width: 400px">
                <el-form-item label="账号:">
                    <el-input v-model="form.userName" />
                </el-form-item>
                <el-form-item label="昵称:">
                    <el-input v-model="form.nickName" />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addOneDialogVisible = false, cleanForm">算了吧</el-button>
                    <el-button type="success" @click="addOneDialogVisible = false, addOne()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>




        <el-dialog v-model="editOneDialogVisible" title="修改" width="500" :before-close="handleClose">

            <el-form :model="form" label-width="auto" style="max-width: 400px">
                <el-form-item label="账号:">
                    <!-- <el-input v-model="form.userName" /> -->
                    <el-text class="mx-1" type="primary">{{ edit.userName }}</el-text>
                </el-form-item>
                <el-form-item label="昵称:">
                    <el-input v-model="edit.nickName" />
                </el-form-item>
                
                <el-form-item label="性别:">
                    <el-select v-model="edit.sex" placeholder="请选择你的性别">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                        <el-option label="保密" value="保密" />
                    </el-select>
                </el-form-item>

                <el-form-item label="备注:">
                    <el-input v-model="edit.remark" />
                </el-form-item>

                <el-form-item label="用户头像:">
                    <el-upload class="avatar-uploader" :http-request="uploadUserimg" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" v-loading="imgloading">
                        <img v-if="edit.avatar" :src="edit.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>

            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="editOneDialogVisible = false">算了吧</el-button>
                    <el-button type="success" @click="editOneDialogVisible = false, editOne()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>


<script setup>

import { onMounted, ref, reactive } from 'vue';
import Api from '@/js/api/user/UserApi';
import userApi from '@/js/api/user/UserApi';
import roleApi from '@/js/api/user/roleApi';
import { ComponentSize, ElMessageBox, ElMessage } from 'element-plus'
import CommonApi from '@/js/api/Common'


const pageQuery = reactive({
    pageNum: 1,
    pageSize: 10,
    search: '',
});

const size = ref < ComponentSize > ('default')

const formData = ref('');

const total = ref();

onMounted(() => {
    getPage();
    getUsers();
    getRoles();
})

const getPage = () => {
    Api.getPage(pageQuery).then((result) => {
        total.value = Number(result.total);//为了保证精度，所有的Long都以String方式返回，记得转换
        formData.value = result.records;
        console.info(total.value)
    }).catch((err) => {
        console.error(err);
    });
}

const handleSizeChange = (prop) => {
    pageQuery.pageSize = prop;
    getPage();
}

const handleCurrentChange = (prop) => {
    pageQuery.pageNum = prop;
    getPage();
}


const delOneDialogVisible = ref(false);
const delProp = reactive({
    id: '',

    roleName: '',
    roleKey: '',
})

// const openDelOne = (prop) => {
//     delOneDialogVisible.value = true;
//     delProp.id = prop.id;
//     delProp.roleName = prop.roleName;
//     delProp.roleKey = prop.roleKey;
// }


const handleClose = () => {
    ElMessageBox.confirm('确定关闭么？')
        .then(() => {
            delOneDialogVisible.value = false;
            editOneDialogVisible.value = false;
            addOneDialogVisible.value = false;
            cleanForm();
            cleanEdit();
        })
        .catch(() => {
            // catch error
        })
}
const delOne = () => {
    Api.delOne(delProp.id).then((res) => {
        if (res) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            getPage();
        }
    }).catch(() => {
        ElMessage({
            message: '请求失败！',
            type: 'warning',
        })

    })
}



//新增的逻辑
const addOneDialogVisible = ref(false);
const openAddOne = () => {
    addOneDialogVisible.value = true;
}

const users = ref('');
const roles = ref('');

const form = reactive({
    nickName: '',
    userName: '',
})

const getUsers = () => {
    userApi.getList().then((res => {

        if (res) {
            users.value = res;
        }
    })).catch(() => {
        ElMessage({
            message: '请求失败！',
            type: 'warning',
        })
    })
}

const getRoles = () => {
    roleApi.getList().then((res => {
        if (res) {
            roles.value = res;
        }
    })).catch(() => {
        ElMessage({
            message: '请求失败！',
            type: 'warning',
        })
    })
}

const addOne = () => {
    Api.addOne(form).then((res) => {
        if (res) {
            ElMessage({
                message: '添加成功！',
                type: 'success',
            })
            cleanForm();
            getPage();
        }
    }).catch(() => {
        ElMessage({
            message: '请求失败！',
            type: 'warning',
        })

    })
}

const cleanForm = () => {
    form.userName = '';
    form.nickName = '';
}



//修改一个的相关方法
const edit = reactive({
    userName: '',
    id: '',
    nickName: '',
    avatar: '',
    remark: '',
    sex: ''
})
const openEdit = (prop) => {
    editOneDialogVisible.value = true;

    edit.userName = prop.userName;
    edit.id = prop.id;
    edit.nickName = prop.nickName;
    edit.avatar = prop.avatar;
    edit.remark = prop.remark;
    edit.sex = prop.sex;

}

const editOneDialogVisible = ref(false);

const cleanEdit = () => {
    edit.userName = ''
    edit.is = ''
    edit.nickName = ''
    edit.avatar = ''
    edit.remark = ''
    edit.sex = ''
}

const uploadUserimg = (prop) => {
    CommonApi.uploadImg(prop).then((res) => {
        if (res) {
            edit.avatar = res;
            console.log(edit.avatar,"头像更新为")
            ElMessage({
                type:"success",
                message:'上传成功'
            })
        }
    }).catch(() => {
        ElMessage.error("发生错误");
    })


}

const editOne = () =>{
    userApi.editOne(edit).then((res) => {
        if (res) {
            ElMessage({
                type:"success",
                message:'更新成功'
            })
            cleanEdit();
            getPage();
        }
    }).catch(() => {
        ElMessage.error("发生错误");
    })
}


const resetPassword = (prop) =>{
    userApi.resetPassword(prop.id).then((res) => {
        if (res) {
            ElMessage({
                type:"success",
                message:'修改完成！'
            })
            
        }
    }).catch(() => {
        ElMessage.error("发生错误");
    })
}


</script>


<style scoped src="./css/common.css"></style>
